<template>
  <div class="home">
    <div class="first-lank">
      <div class="title-block">
        <div class="seach">
          <el-input v-model="formData.user" placeholder="功能搜索...">
            <template #append>
              <img style="height: 16px" src="../../assets/seach.png" alt=""/>
            </template>
          </el-input>
        </div>
        <div class="title-txt">
          医师电子化注册信息系统(机构版) - -天水迦南康复医院(版本号:8.9.2.4)
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <ul class="nav-list">
          <li :class="{ action: item.checked }" v-for="(item, index) in nav" :key="index">
            {{ item.label }}
          </li>
        </ul>
        <ul class="nav-right">
          <li>
            <img class="nav-pic" src="../../assets/11.png" alt="">
            人脸识别设备管理
          </li>
          <li>
            <img class="nav-pic" src="../../assets/12.png" alt="">
            绑定微信
          </li>
          <li>
            <img class="nav-pic" src="../../assets/13.png" alt="">
            客户中心
          </li>
          <li>
            <img class="nav-pic" src="../../assets/13.png" alt="">
            关于
          </li>
        </ul>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <ul class="two-box">
        <li>
          <div class="bt" :class="{'nav-action1':navIndex==3}" @click="changeNavData(3,'主执业机构在本院医师')">
            <img style="width: 36px" :src="navIndex==3?pic1:pic4" alt=""/>
            <div class="bt-txt">主执业机构在本院医师</div>
          </div>
          <div style="text-align: center; font-size: 16px; margin-top: 10px">主执业</div>
        </li>
        <li>
          <div class="bt1" v-for="(item,index) in navData" :class="{'nav-action':navIndex === index}"
               @click="changeNavData(index,item.label)"
               :key="index">
            <img style="width: 28px" :src="item.pic" alt=""/>
            <div class="bt-txt1">{{ item.label }}</div>
          </div>
          <div class="bt1" style="justify-content: center">
            <div class="bt-txt1">多执业机构备案</div>
          </div>
        </li>
        <li>
          <div class="bt1">
            <img style="width: 20px" src="../../assets/4.png" alt=""/>
            <div class="bt-txt1">本院多地点医师</div>
          </div>
          <div class="bt1">
            <img style="width: 20px" src="../../assets/5.png" alt=""/>
            <div class="bt-txt1">多地点执业在本院医师</div>
          </div>
          <div class="bt1" style="justify-content: center">
            <div class="bt-txt1">多地点</div>
          </div>
        </li>
        <li>
          <div style="display: flex; justify-content: center; height: 60px">
            <div class="bt1 bt2">
              <img style="width: 28px; margin-bottom: 10px" src="../../assets/6.png" alt=""/>
              <div class="bt-txt1">医师账户激活</div>
            </div>
            <div class="bt1 bt2">
              <img style="width: 28px; margin-bottom: 10px" src="../../assets/7.png" alt=""/>
              <div class="bt-txt1">撤销医师账户</div>
            </div>
          </div>
          <div class="bt1" style="justify-content: center; margin-top: 5px">
            <div class="bt-txt1">本院医师账户管理</div>
          </div>
        </li>
        <li>
          <div class="bt1">
            <img style="width: 28px" src="../../assets/8.png" alt=""/>
            <div class="bt-txt1 bt-txt2">机构必读手册下裁</div>
          </div>
          <div class="bt1">
            <img style="width: 28px" src="../../assets/8.png" alt=""/>
            <div class="bt-txt1 bt-txt2">用户手册下载</div>
          </div>
          <div class="bt1" style="margin-left: 30px; padding-top: 3px">
            <div class="bt-txt1">使用手册下载</div>
          </div>
        </li>
      </ul>
      <img style="height: 100px;margin-top: 10px;margin-right: 10px;" src="../../assets/14.png" alt="">
    </div>
    <el-divider content-position="left">
      <h4>当前位置:本院执业医师信息 → {{ showTitel||'主执业机构在本院医师' }}</h4>
    </el-divider>
    <div style="display: flex; padding-right: 10px">
      <div class="seach-all">
        <div class="seach-all1">
          <div style="width: 60px">医师姓名</div>
          <el-input v-model="queryParam.name" style="width: 120px" placeholder=""/>
        </div>
        <div class="seach-all1">
          <div style="width: 60px">所在科室</div>
          <el-input v-model="queryParam.dept" style="width: 120px" placeholder="请选择科室...">
            <template #append>
              <img style="height: 6px; padding: 0 3px" src="../../assets/down.png" alt=""/>
            </template>
          </el-input>
        </div>
        <div class="seach-all1">
          <div style="width: 60px">信息修改</div>
          <el-input v-model="queryParam.isModified" readonly style="width: 68px" placeholder="">
            <template #append>
              <img style="height: 6px; padding: 0 3px" src="../../assets/down.png" alt=""/>
            </template>
          </el-input>
        </div>
        <div class="seach-all1">
          <div style="width: 60px">电子证照</div>
          <el-input v-model="queryParam.eCertState" readonly style="width: 68px" placeholder="功能搜索...">
            <template #append>
              <img style="height: 6px; padding: 0 3px" src="../../assets/down.png" alt=""/>
            </template>
          </el-input>
        </div>
        <div class="seach-all1">
          <div style="width: 70px">医通办注册</div>
          <el-input v-model="queryParam.isYtbRegisted" readonly style="width: 68px" placeholder="功能搜索...">
            <template #append>
              <img style="height: 6px; padding: 0 3px" src="../../assets/down.png" alt=""/>
            </template>
          </el-input>
        </div>
        <div class="seach-all1 seach-all2">
          <div class="btn" @click="handleReset">清空</div>
          <div class="btn" @click="handleQuery">获取最新</div>
          <div class="btn" @click="handleAdd" v-if="isAdmin">新增</div>
        </div>
      </div>
      <div class="seach-all2 seach-all3">
        <div class="btn" @click="exportExcel">导出</div>
        <div style="margin-left: 10px; font-size: 14px">
          上次获取时间：{{ getDay }}
        </div>
      </div>
    </div>
    <ul class="conten-lank">
      <li>为保证个人信息安全和工作时间系统效率，机构端系统进行如下调整:</li>
      <li>
        1.系统中人员显示数据项进行了优化，取消人员身份证号、资格证书编码等信息显示项，可以在査看详细中査看医师详细信息;
      </li>
      <li>
        2.系统中数据导出增加了相应的限制，当前显示信息可以实时导出，全数据项导出请在工作日的早8:00,点之前或晚18:00之后点击【获取最新数据】后进行导出操作。
      </li>
      <li>
        【提示】系统将调用电脑上的浏览器预览电子证照，点击查看电子证照按钮后请在浏览器查看电子证照。
      </li>
    </ul>
    <div class="table">
      <div class="table-top">
        <div class="top1">本机构医师列表</div>
        <div class="top1"></div>
      </div>
      <el-table :data="tableData" empty-text="" border :row-class-name="tableRowClassName"
                style="width: 100%;height: 350px; border: 1px solid #d2cbcb">
        <el-table-column
            :prop="item.prop"
            :label="item.lable"
            :width="item.width"
            v-for="(item,index) in tableHead" :key="index">
          <template #default="{row}">
            <div class="detail-btn" v-if="item.btnTxt" @click="btnTxtEvent(item,row)">{{ item.btnTxt }}</div>
            <div v-else>{{ row[item.prop] }}</div>
          </template>
        </el-table-column>
       <el-table-column fixed="right" label="操作" min-width="100" v-if="isAdmin">
         <template #default="scope">
           <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button link type="primary" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
      </el-table>

    </div>
  </div>
  <div class="h-math">
    <div style="width: 70px;background: #fff;padding: 3px 0 3px 3px;">行数：{{ total }}</div>
  </div>
  <div class="foot">
    <div style="display: flex;border-top: solid 1px #d2cbcb;width: 100%;justify-content: space-between;">
      <div style="display: flex;">
        <div class="li">
          <img style="width: 20px;margin-right: 2px;" src="../../assets/15.png" alt=""/>
          用户名：张嘉乐
        </div>
        <div class="li">
          <img style="width: 20px;margin-right: 2px;" src="../../assets/16.png" alt=""/>
          登录时间：{{ getDay }}
        </div>
      </div>
      <div class="li">
        <img style="width: 20px;margin-right: 2px;margin-top: 5px;" src="../../assets/17.png" alt=""/>
        邮箱：support@minke.cn
      </div>
    </div>
  </div>
  <div class="load-data" v-if="loading">
    <div v-loading="loading"></div>
    <div class="load-cont" >正在查询，请稍后... ...</div>
  </div>
  <PersonDetail ref="personDetailRef"/>
  <SaveModal ref="saveModalRef" @reload="handleQuery" />
</template>
<script setup lang="js">
import {onMounted, ref} from "vue";
import {ElDivider, ElInput, ElMessageBox} from "element-plus";
import {tableData3, tableData1, tableHead1} from "./index.js";
import { exportHeaders } from "./export-header.js";
import {useRoute} from 'vue-router';
import PersonDetail from './components/personDetail.vue'
import SaveModal from './components/saveModal.vue'
import pic2 from '../../assets/2.png'
import pic3 from '../../assets/3.png'
import pic1 from '../../assets/1.png'
import pic4 from '../../assets/111.png'
let loading = ref(false)


const route = useRoute()
let navIndex = ref(3)
let personDetailRef = ref(null)
let saveModalRef = ref(null)

let getDay = route.query.day
const isAdmin = route.query.user == 'admin'

let formData = ref({
  user1: "全部",
});

const getFileName = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  // 动态文件名
  return `导出文件-${year}-${month}-${day}_${hour}-${minute}-${second}.xlsx`;
}

let navData = ref([
      {
        label: "本院多执业机构备案医师",
        pic: pic2
      },
      {
        label: "外院在本院多执业机构医师",
        pic: pic3
      }
    ]
)

let tableHead = ref([])
let tableData = ref([])

let total = ref(0)

let queryParam = ref({
  name: undefined,
  orgName: undefined,
})
let showTitel = ref('')
// 改变导航
const changeNavData = (index,str) => {
  console.log(index)
  showTitel.value = str
  if (index === 3) {
    navIndex.value = 3
    handleQuery()
  } else {
    navIndex.value = index
    if (navIndex.value === 0) {
      tableData.value = []
    } else {
      tableData.value = tableData1
    }
  }

  console.log(navIndex.value)
  tableHead.value = tableHead1[navIndex.value]
}
// 查看详情
const btnTxtEvent = (item,row) => {
  if (item.clickFlag) {
    loading.value = true
    setTimeout(()=>{
      loading.value = false
      personDetailRef.value.openInit(row)
    },1000)
    // console.log(item, "====item")
  }
}

const tableRowClassName = ({rowIndex}) => {
  return "warning-row1";
};

const exportExcel = async () => {
  try {
    console.log(tableData.value)
    if (tableData.value.length === 0) {
      await ElMessageBox.alert(
          '当前列表无数据，请先获取最新数据',
          '提示',
          {
            confirmButtonText: '确认',
            type: 'warning',
          }
      )
      return
    }
    // 生成文件名
    const fileName = getFileName();
    await window.electronAPI.saveExcel(JSON.stringify({
      fileName: fileName,
      headers: exportHeaders,
      data: tableData.value
    }));

    console.log('数据已成功导出为 Excel 文件');
  } catch (error) {
    console.error('导出 Excel 文件时出错:', error);
  }
};

const handleReset = async () => {

  if (navIndex.value === 3){
    queryParam.value.name = undefined
    queryParam.value.orgName = undefined
    handleQuery()
  }
}

const handleQuery = async () => {
  const params = JSON.stringify(queryParam.value)
  const res = await window.api.QueryUserPage(params);
  console.log(res)
  tableData.value = res
  total.value = tableData.value.length
}

const handleAdd = async () => {
  saveModalRef.value.openInit()
}

const handleEdit = async (row) => {
  saveModalRef.value.openInit(row)
}

const handleDelete = async (id) => {
  ElMessageBox.confirm(
    '确认删除当前数据？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      window.api.DeleteUserById(id).then(() => handleQuery());
    })
    .catch(() => {

    })

}

const handleImport = async () => {
  tableData3.forEach(item => {
    const birthday = item.b.substring(6,10) + '年' + item.b.substring(10,12) + '月' + item.b.substring(12, 14) + '日'
    const user = {
      name: item.a,
      idCardNo: item.b,
      gender: item.c,
      age: item.d,
      birthDay: birthday,
      nation: '汉族',
      doctorType: item.e,
      doctorLevel: item.f,
      certNo: item.g,
      doctorScope: item.h,
      licenseNo: item.i,
      postQualification: item.j,
      state: item.k,
      isModified: item.l,
      auditTime: item.m,
      eCertState: item.q,
      isYtbRegisted: item.r,
      orgName: '天水迦南康复医院',
      orgAddress: '天水市秦州区万达天御小区经三路北口',
      startDate: '2024年12月10日',
      endDate: '2027年12月31日',
      school: '天水市卫生学校',
      profession: '临床医学',
      education: '大学',
      approvalDate: '2020年10月18日',
      approvalAgency: '天水市秦州区卫生和计划生育局',
    }
    console.log(JSON.stringify(user))
    window.api.InsertUser(JSON.stringify(user))
  })
}

let nav = [
  {label: "本院执业医师信息", checked: true},
  {label: "业务办理"},
  {label: "医师验证"},
  {label: "综合信息"},
  {label: "统计信息"},
  {label: "医师在外省注册情况"},
  {label: "系统功能"},
  {label: "电子密钥用户专区"},
];

onMounted(() => {
  tableHead.value = tableHead1[navIndex.value]
  handleQuery()
})

</script>

<style lang="scss">
@import "./index.scss";

.load-data {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  z-index: 999;
  background: #fff;
  display: flex;
  padding-left: 20px;
  border: solid 1px #d2cbcb;

  //width: 100%;
  //height: 100%;
  .load-cont {
    width: 160px;
    font-size: 14px;
    padding: 20px 10px 20px 60px;
    //padding-left: 60px;
  }

}
</style>
<style>
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #d2cbcb;
}

.el-table--border .el-table__cell {
  border-right: 1px solid #d2cbcb;
}

.el-table .cell {
  padding: 0 5px;
}

.el-table .el-table__cell {
  padding: 5px 0;
}

.el-input-group__append {
  padding: 0 2px !important;
}

.el-divider__text,
.is-left {
  background: none !important;
  padding: 0;
}

.el-table__header .el-table__cell {
  background: #f0f0f0 !important;
}

.warning-row {
  background: #c2ffff !important;
}

.warning-row1 {
  background: #f0f0f0 !important;
}

.nav-action {
  color: #0173c9;
}

.nav-action1 {
  background: #adadad;
  color: #1b0ec5;
}
.el-scrollbar {
  height: calc(100vh - 700px)!important;
}

</style>
